<template>
  <div class="login-box">
    <div class="login-logo">
      <img src="@/assets/logo.png" width="45" />
      <h1 class="mb-0 ml-2 text-3xl font-bold">{{ title }}</h1>
    </div>
    <a-form ref="form" layout="horizontal" :rules="rules" :model="formData" @submit.prevent=" ">
      <a-form-item name="account">
        <a-input v-model:value.trim="formData.account" size="large" placeholder="admin">
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="password">
        <a-input v-model:value.trim="formData.password" size="large" type="password" placeholder="123456"
          autocomplete="new-password">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input placeholder="验证码" :maxlength="4" size="large">
          <template #prefix>
            <SafetyOutlined />
          </template>
          <template #suffix>
            <img class="absolute right-0 h-full cursor-pointer" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue'
import type { FormInstance } from 'ant-design-vue/es/form/Form'
import type { Rule } from 'ant-design-vue/lib/form/interface'
import { useRequest } from "@/lib/net"
import { message } from 'ant-design-vue'

const title = import.meta.env.VITE_TITLE
const formData = reactive<any>({});
const formRef = ref<FormInstance>();
const rules: Record<string, Rule[]> = {
  account: [{ required: true, message: '不能为空' }],
  password: [{ required: true, message: '不能为空' }]
};



</script>

<style scoped>
.login-box {
  display: flex;
  width: 100vw;
  height: 100vh;
  padding-top: 240px;
  background: url('~@/assets/login.svg');
  background-size: 100%;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
}

.svg-icon {
  font-size: 48px;
}

:deep(.ant-form) {
  width: 400px;
}

.ant-col {
  width: 100%;
}

.ant-form-item-label {
  padding-right: 6px;
}
</style>
